<template>
  <el-form>
    <el-form-item label="边框宽度">
        <xue-input
            :defaultValue="get('data.borderWidth.value', 1)"
            @change="(value) => update({
                changes: [{
                    path: 'data.borderWidth.value',
                    value: parseInt(value),
                }]
            })"
        >
            <span slot="suffix">px</span>
        </xue-input>
    </el-form-item>
    <el-form-item label="边框颜色">
        <el-color-picker
            show-alpha
            :value="get('data.borderColor.value', '')"
            @change="(value) => update({
                changes: [{
                    path: 'data.borderColor.value',
                    value,
                }]
            })"
        />
    </el-form-item>
  </el-form>
</template>

<script>
import xueInput from '@/components/xueInput.vue';
import xueColor from '@/components/xueColor.vue';

export default {
    props: ['get'],
    inject: ['update'],
    components: {
        xueInput,
        xueColor,
    },
}
</script>

<style lang="less" scoped>
/deep/ .el-form-item{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    .el-form-item__label {
        font-size: 12px;
    }
    .el-form-item__content {
        flex: 1;
        .el-color-picker {
            height: 22px;
            width: 100%;
            .el-color-picker__trigger {
                width: 100%;
                height: 100%;
                padding: 0;
                border-radius: 0;
                border: solid 1px #DEDEDE;
            }
            .el-color-picker__icon {
                display: none;
            }
        }
    }
}
</style>